16. Введение в Emmet

Что такое Emmet?

Emmet — это плагин для редакторов кода (таких как Visual Studio Code, Sublime Text, Atom и другие), который позволяет значительно ускорить разработку HTML и CSS за счет использования сокращений. Вместо того чтобы писать код вручную, вы можете использовать шорткоды, которые автоматически разворачиваются в полноценную разметку.

Почему Emmet полезен?

  • Скорость. Вы можете генерировать сложную HTML-структуру за секунды.
  • Простота. Emmet использует понятный синтаксис, основанный на CSS-селекторах.
  • Универсальность. Работает во многих популярных редакторах кода.

Основы синтаксиса Emmet

1. Создание тегов

Просто укажите название тега:

div

Это развернется в:

<div></div>

2. Добавление классов и идентификаторов

Используйте точку (.) для классов и решетку (#) для ID:

div.container

Результат:

<div class="container"></div>
div#header

Результат:

<div id="header"></div>

3. Вложенность

Используйте знак > для создания вложенных элементов:

div>ul>li

Результат:

<div>
    <ul>
        <li></li>
    </ul>
</div>

4. Соседние элементы

Используйте знак + для создания соседних элементов:

h1+p

Результат:

<h1></h1>
<p></p>

5. Группировка

Используйте круглые скобки для группировки:

div>(header>h1)+footer

Результат:

<div>
    <header>
        <h1></h1>
    </header>
    <footer></footer>
</div>

6. Списки с генерацией

Используйте символ * для генерации повторяющихся элементов:

ul>li*3

Результат:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

7. Добавление текста в элементы

Используйте {} для добавления текста:

p{Hello, World!}

Результат:

<p>Hello, World!</p>

8. Атрибуты

Добавляйте атрибуты через квадратные скобки:

input[type="text" placeholder="Введите имя"]

Результат:

<input type="text" placeholder="Введите имя">

Пример использования Emmet

Сокращение:

div#main.container>h1{Добро пожаловать!}+p{Это пример использования Emmet.}+ul>li.item*3

Разворачивается в:

<div id="main" class="container">
    <h1>Добро пожаловать!</h1>
    <p>Это пример использования Emmet.</p>
    <ul>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

Практическое задание

  1. Создайте новый HTML-файл.
  2. С помощью Emmet создайте структуру:
    • Тег header с вложенным тегом h1, содержащим текст "Заголовок страницы".
    • Тег main, внутри которого:
      • Тег section с классом content и параграфом "Это текст параграфа".
      • Тег aside с классом sidebar, внутри которого список из 5 элементов с текстами "Элемент 1", "Элемент 2" и так далее.
    • Тег footer, содержащий тег p с текстом "Автор: ваше имя".